﻿{% extends "base/base.html" %}
{% load staticfiles %}

{# sign up informaiton  #}}
{% block customizedCSS %}
<!-- this page specific styles -->
    <link rel="stylesheet" href="/static/css/compiled/signup.css" type="text/css" media="screen" />

    <!-- open sans font -->
    <style type="text/css">
        *{font-family:'Microsoft YaHei';}
        #error_div{color:red}
        #error_div ul{list-style: circle;}
        #error_div ul li{text-align: left;}
    </style>
{% endblock %}

 {% block body %}
<div class="header">
            <a href="index.html">
                <img src="/static/img/logo-white.png" class="logo" />
            </a>
        </div>
        <div class="row-fluid login-wrapper">
            <div class="box">
                <form method="post" id="form">
                    {% csrf_token %}
                    <div class="content-wrap">
                        <h6>注册新的用户</h6>
                        {% if sign%}
                            <div class="alert alert-success alert-dismissible" role="alert">
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <strong>成功!</strong> 注册会员{{form.email.value}}
                            </div>
                        {%endif%}
                        <input class="span12" name="email" type="text" value="{{form.email.value}}" placeholder="E-mail address" />
                        <input class="span12" name="password1" type="password" placeholder="Password" />
                        <input class="span12" name="password2" type="password" placeholder="Confirm Password"/>
                        <div id="error_div">
                        <!--遍历传回表单数据中，将其中的错误信息显示出来-->
                        {% if error%}
                        <div class="alert alert-danger" role="alert">
                            {%for field in form%}
                                {{field.errors}}
                            {%endfor%}
                        </div>
                        {%endif%}
                        </div>
                        <div class="action">
                            <input type="submit" class="btn-glow primary signup" value="注册" />
                        </div>
                    </div>
                </form>
            </div>

            <div class="span4 already">
                <p>Already have an account?</p>
                <a href="../">Sign in</a>
            </div>
        </div>
 {% endblock %}
{# custmized javescript #}}
{% block customizedJS %}
        <script type="text/javascript">
        $(function () {
            //-当输入框获取焦点时清空错误提示容器中的错误信息
            $("#form input").focus(function(){
                $("#error_div").html("");
            });
        });
        </script>
{% endblock %}
